<template>
  <el-card class="bar-block">
    <!--吧头像-->
    <div @click="openBarPage" style="cursor: pointer">
      <el-image
        v-if="barInfo.avatar"
        style="width: 100px; height: 100px"
        :src="barAvatarUrl"
        fit="fill">
      </el-image>
    </div>
    <!--吧信息-->
    <div class="right-content">
      <!--吧名-->
      <div style="margin-bottom: 10px;cursor: pointer" @click="openBarPage">{{ barInfo.name }}</div>
      <!--吧动态-->
      <div class="dynamic">
        <span style="margin-right: 20px;"><i class="el-icon-user"></i>{{ barInfo.followNum }}</span>
        <span><i class="el-icon-tiezi"></i>{{ barInfo.postNum }}</span>
      </div>
      <!--吧简介-->
      <div>简介: {{ barInfo.introduction }}</div>
    </div>
  </el-card>
</template>

<script>
import { baseUrl } from '@/utils/const'

export default {
  name: 'bar-block',
  props: {
    barInfo: {
      required: true,
      typeof: Object
    }
  },
  computed: {
    barAvatarUrl () {
      return baseUrl + this.barInfo.avatar
    }
  },
  methods: {
    openBarPage () {
      const routeData = this.$router.resolve({
        path: '/barPage',
        query: {
          id: this.barInfo.id
        }
        // query: this.barInfo
      })
      window.open(routeData.href)
      // console.log(routeData)
    }
  }
}
</script>
<style scoped lang="less">
/deep/
.el-card__body {
  display: flex;
  padding: 10px;

  .right-content {
    margin-left: 10px;

    .dynamic {
      font-size: small;
      color: @menuText_gray;
      margin-bottom: 10px;
    }
  }
}

</style>
